<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--标准mui.css-->
		<link href="../../cssmui/mui.min.css" rel="stylesheet" />
		<link href="../../css/mylist.css" rel="stylesheet" />
		<link href="../../cssmui/mui.picker.css" rel="stylesheet" />
		<link href="../../cssmui/mui.poppicker.css" rel="stylesheet" />
		<!--App自定义的css-->
		<link href="../../css/app.css" rel="stylesheet" />
		<script src="../../mui/mui.min.js"></script>
		
		<script src="../../mui/mui.picker.min.js"></script>
		<script src="../../js/zdyfile.js"></script>
		<script src="../../js/mysimg.js"></script>
		<script src="../../mui/common.js"></script>	
		<script src="../../js/app.js"></script>
		<script src="../../js/jsondb.js"></script>
	
		<script src="../../js/map/mydict.js"></script><style type="text/css">
			.input70 {
				width: 70%;
			}
			
			.mui-slider-group {
				height: 200px
			}
			.mui-content{
				margin-bottom: 50px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">个人信息</h1>

		</header>
		<div class="mui-content" >
		
			<form class="mui-input-group">

				<ul class="mui-table-view">

					<li class="mui-table-view-cell mui-collapse mui-active ">
						<a class="mui-navigate-right " href="#">基本</a>
						<div class="mui-collapse-content">
							<input id="uid" type="hidden">

							<div class=" mui-input-row input-item">
								<label class="mui-table-cell mui-col-sm-3 mui-col-xs-3 input-item_label">昵称</label>
								<div class="mui-table-cell mui-col-sm-9 mui-col-xs-9">
									<input id="uname" type="text" class="mui-input-clear" placeholder="必填">
								</div>
							</div>
							
							<div class="mui-input-row input-item">
								<label class="mui-table-cell mui-col-sm-3 mui-col-xs-3 input-item_label">地址</label>
								<div class="mui-table-cell mui-col-sm-9 mui-col-xs-9">
									<input id="addr" type="text" class="mui-input-clear" placeholder="">
								</div>
							</div>
							<div class="mui-input-row input-item">
								<label class="mui-table-cell mui-col-sm-3 mui-col-xs-3 input-item_label">手机</label>
								<div class="mui-table-cell mui-col-sm-9 mui-col-xs-9">
									<input id="tel" type="text" class="mui-input-clear" placeholder="可以短信找回密码">
								</div>
							</div>
							<div class="mui-input-row input-item">
								<label class="mui-table-cell mui-col-sm-3 mui-col-xs-3 input-item_label">email</label>
								<div class="mui-table-cell mui-col-sm-9 mui-col-xs-9">
									<input id="email" type="text" class="mui-input-clear" placeholder="可以邮件找回密码">
								</div>
							</div>
							<div class="mui-input-row input-item">
								<label class="mui-table-cell mui-col-sm-3 mui-col-xs-3 input-item_label">QQ</label>
								<div class="mui-table-cell mui-col-sm-9 mui-col-xs-9">
									<input id="uqq" type="text" class="mui-input-clear" placeholder="">
								</div>
							</div>
							<div class="mui-row">
								<label class="mui-table-cell mui-col-sm-3 mui-col-xs-3 input-item_label">头像</label>
								<div class="mui-table-cell  mui-col-sm-10 mui-col-xs-10 " style="padding-left: 2px;">
									<div id="slider " class=" mui-slider ">										
											<div id="divphotos" class="mui-slider-group">
											<div v-for="(item,index) in imgs" class="mui-slider-item img-btn">						
							<img class="sliderimg" onload="imgLoaded(this)" v-on:click="onclick(event)"  :src="item.src">
						</div>
											</div>									
									</div>
								</div>
								<div class="mui-table-cell mui-col-sm-2 mui-col-xs-2" style="padding-left: 5px;">
									<button onclick="_si.takeImage()" class="mybtn" type="button">拍照</button>
									<button onclick="_si.openImage()" class="mybtn" type="button">导入</button>
									<button onclick="_si.delImage()" class="mybtn" type="button">删图</button>
									<button onclick="_si.lockImage()" class="mybtn" type="button">置顶</button>
									<button onclick="_si.chgImage()" class="mybtn" type="button">修图</button>
								</div>
							</div>
						</div>
					</li>

				</ul>
<br>
			</form>
			</div>
			<nav class="mui-bar mui-bar-tab">
				<a class="mui-tab-item" href="save">
					<span class="mui-tab-label">保存</span>
				</a>
			</nav>
			<script type="text/javascript">
				var _tb_users1 = null;
				var _curid = null;
				(function($, doc) {
					_tb_users1 = new XCDBHelp('tb_users1')					
					//var mould = clone(MYMODEL['tb_users1'])
					$.init();
					$.ready(function() {			
						//--------------------级联示例--------------
						
						//-----------------图片操作------------------------
						document.querySelector('.mui-slider').addEventListener('slide', function(event) {
							//注意slideNumber是从0开始的；						
							_si.setIndex(event.detail.slideNumber);
							console.log(event.detail.slideNumber)
						});

						mui("#divphotos").on('tap', '.img-btn', function() {
							showimg(this);
						});
						//-------------------------底部按钮--------------
						$("nav").on("tap", ".mui-tab-item", function() {
							var eventname = this.getAttribute("href")
							if(eventname == "save") {
								save();
							}
						});
						//-----------------------------------------

					});
				})(mui, document);
				//-------------回调函数-------------------
				
				
				//图片改变事件的回调函数
				function imgchanged(src) {
					_si.chgCurImgCallback(src);
				}
				//--------------图片引入+数据载入------------------

				function afterPlusReady() {
					_si = new SliderImage("divphotos");					
					loadDataById(_curid);
				}

				function loadDataById(id) {
					var rc =null
					var ars=_tb_users1.getList()
					for (var k in  ars)
						rc=ars[k]
					if(rc) {
						put(rc)
					}
				}
				//--------------数据读写------------------
				function save() {
				
					_si.saveImgs(function(s) {//有图片时调用
						
						var md = {}
						md._idkey = _FF.getV('uid');
						md.uimg = s;
						md.uname = _FF.getV('uname');
						//md.motto = _FF.getV('motto');
						md.uqq = _FF.getV('uqq');					
						md.addr = _FF.getV('addr');
						md.email = _FF.getV('email');
						md.tel = _FF.getV('tel');
						//md.zipc = _FF.getV('zipc');
						//md.remark = _FF.getV('remark');
						//md.weixin = _FF.getV('weixin');
						 console.log("info196--" + s)
						_tb_users1.setObj(md);
						_reload = 1
					
						mui.toast("数据保存完毕")
						document.activeElement.blur();
						
					});

				}

				function put(data) {					
					_FF.putV('uid', data._idkey);
					_FF.putV('uname', data.uname);
					//_FF.putV('motto', data.motto);
					_FF.putV('uqq', data.uqq);
					_FF.putV('addr', data.addr);
					_FF.putV('email', data.email);
					_FF.putV('tel',data.tel);
					//_FF.putV('weixin',data.weixin);
					//_FF.putV('zipc',data.zipc);
					//_FF.putV('sex',data.sex);
					//_FF.putV('remark',data.remark);
					//console.log('ccc'+data.gimg)
					_si.loadImgs(data.uimg)

				}
				
			</script>
	</body>

</html>